<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta 
    http-equiv="X-UA-Compatible" 
    content="ie=edge">
  <meta 
    name="theme-color" 
    content="#fff" 
    id="theme-color">
  <meta 
    name="description" 
    content="霜序廿的个人网站">
  <link 
    rel="icon" 
    href="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
  <title>前端开发规范</title>
  
    
      <meta 
        property="og:title" 
        content="前端开发规范">
    
    
      <meta 
        property="og:url" 
        content="https://shuangxunian.github.io/2021/06/13/FEDevelopmentSpecification/index.html">
    
    
      <meta 
        property="og:img" 
        content="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
    
    
      <meta 
        property="og:img" 
        content="如题目">
    
    
      <meta 
        property="og:type" 
        content="article">
      <meta 
        property="og:article:published_time" 
        content="2021-06-13">
      <meta 
        property="og:article:modified_time" 
        content="2021-03-19">
      <meta 
        property="og:article:author" 
        content="霜序廿">
      
        
          <meta 
            property="og:article:tag" 
            content="其他">
        
      
    
  
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
    function loadCSS(href, data, attr) {
      var sheet = document.createElement('link');
      sheet.ref = 'stylesheet';
      sheet.href = href;
      sheet.dataset[data] = attr;
      document.head.appendChild(sheet);
    }
    function changeCSS(cssFile, data, attr) {
      var oldlink = document.querySelector(data);
      var newlink = document.createElement("link");
      newlink.setAttribute("rel", "stylesheet");
      newlink.setAttribute("href", cssFile);
      newlink.dataset.prism = attr;
      document.head.replaceChild(newlink, oldlink);
    }
  </script>
  
    
      
      
      
      
        
        
        
        <script>
          function prismThemeChange() {
            if(document.getElementById('theme-color').dataset.mode === 'dark') {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism-tomorrow.min.css', '[data-prism]', 'prism-tomorrow');
              } else {
                loadCSS('/js/lib/prism/prism-tomorrow.min.css', 'prism', 'prism-tomorrow');
              }
            } else {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism.min.css', '[data-prism]', 'prism');
              } else {
                loadCSS('/js/lib/prism/prism.min.css', 'prism', 'prism');
              }
            }
          }
          prismThemeChange()
        </script>
      
      
        
        <link rel="stylesheet" href="/js/lib/prism/prism-line-numbers.min.css">
      
    
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
  </script>
  
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
        prismThemeChange();
      }
    };
    setDarkmode();
    </script>
  
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
  
  <link rel="stylesheet" href="/css/main.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
  
    <link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
  
<meta name="generator" content="Hexo 5.4.0"></head>

  <body>
    <div class="wrapper">
       
      <nav class="navbar">
  <div class="navbar-logo">
    <span class="navbar-logo-main">
      
        <img 
          class="navbar-logo-img" 
          src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
          alt="blog logo">
      
      <span class="navbar-logo-dsc">霜序廿的个人网站</span>
    </span>
  </div>
  <div class="navbar-menu">
    
      <a 
        href="/" 
        class="navbar-menu-item">
        
          首页
        
      </a>
    
      <a 
        href="/archives" 
        class="navbar-menu-item">
        
          归档
        
      </a>
    
      <a 
        href="/tags" 
        class="navbar-menu-item">
        
          标签
        
      </a>
    
      <a 
        href="/categories" 
        class="navbar-menu-item">
        
          分类
        
      </a>
    
      <a 
        href="/about" 
        class="navbar-menu-item">
        
          关于
        
      </a>
    
      <a 
        href="/links" 
        class="navbar-menu-item">
        
          友链
        
      </a>
    
    <a 
      class="navbar-menu-item darknavbar" 
      id="dark">
      <i class="iconfont icon-weather"></i>
    </a>
    <a 
      class="navbar-menu-item searchnavbar" 
      id="search">
      <i 
        class="iconfont icon-search" 
        style="font-size: 1.2rem; font-weight: 400;">
      </i>
    </a>
  </div>
</nav> 
      
      <div 
        id="local-search" 
        style="display: none">
        <input
          class="navbar-menu-item"
          id="search-input"
          placeholder="请输入搜索内容..." />
        <div id="search-content"></div>
      </div>
      
      <div class="section-wrap">
        <div class="container">
          <div class="columns">
            <main class="main-column">
<article class="card card-content">
  <header>
    <h1 class="post-title">
      前端开发规范
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2021-06-13T13:48:56.033Z">
      <i 
        class="iconfont icon-calendar" 
        style="margin-right: 2px;">
      </i>
      <span>2021-06-13</span>
    </time>
    
      <span class="dot"></span>
      
        <a 
          href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/" 
          class="post-meta-link">
          技术文章
        </a>
      
    
    
      <span class="dot"></span>
      <span>6.8k 字</span>
    
  </div>
  
    <div 
      class="post-meta post-show-meta" 
      style="margin-top: -10px;">
      <div style="display: flex; align-items: center;">
        <i 
          class="iconfont icon-biaoqian" 
          style="margin-right: 2px; font-size: 1.15rem;">
        </i>
        
          
          <a 
            href="/tags/%E5%85%B6%E4%BB%96/" 
            class="post-meta-link">
            其他
          </a>
        
      </div>
    </div>
  
  </header>
  <div 
    id="section" 
    class="post-content">
    <h2 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h2><p>确定开发规范的好处有：</p>
<ul>
<li>通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。</li>
<li>一个团队的代码风格如果统一了，首先可以培养良好的协同和编码习惯，其次可以减少无谓的思考，再次可以提升代码质量和可维护性。</li>
</ul>
<h2 id="通用书写规范"><a href="#通用书写规范" class="headerlink" title="通用书写规范"></a>通用书写规范</h2><h3 id="1-基本原则：结构、样式、行为分离"><a href="#1-基本原则：结构、样式、行为分离" class="headerlink" title="1. 基本原则：结构、样式、行为分离"></a>1. 基本原则：结构、样式、行为分离</h3><ul>
<li>尽量确保文档和模板只包含 HTML 结构，样式都放到 css 样式表里，行为都放到 js 脚本里</li>
<li>标记应该是结构良好、语义正确。</li>
<li>Javascript应该起到渐进式增强用户体验的作用 。</li>
</ul>
<h3 id="2-文件-资源命名"><a href="#2-文件-资源命名" class="headerlink" title="2.文件/资源命名"></a>2.文件/资源命名</h3><p>在 web 项目中，使用驼峰命名法命名所有文件。</p>
<h3 id="3-省略外链资源-URL-协议部分"><a href="#3-省略外链资源-URL-协议部分" class="headerlink" title="3.省略外链资源 URL 协议部分"></a>3.省略外链资源 URL 协议部分</h3><p>省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题。</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/fbecd6fc-9e64-4c8f-8ed7-757141b8655d-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/fbecd6fc-9e64-4c8f-8ed7-757141b8655d-3807603.jpg"></p>
<h3 id="4-写注释"><a href="#4-写注释" class="headerlink" title="4.写注释"></a>4.写注释</h3><p>写注释时请一定要注意：写明代码的作用，重要的地方一定记得写注释。 没必要每份代码都描述的很充分，它会增重HTML和CSS的代码。这取决于该项目的复杂程度。</p>
<ol>
<li>单行注释说明： <pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 单行注释以两个斜线开始，后接一个空格，然后开始写内容，以行尾结束</span>
<span class="token comment">// 调用了一个函数</span>
<span class="token function">setTitle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> maxCount <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token comment">// 设置最大量</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>多行注释 <pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// vscode的快捷键是alt + shift + A</span>
<span class="token comment">/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>函数注释 <pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
* 以星号开头，紧跟一个空格，第一行为函数说明 
* @param &#123;类型&#125; 参数 单独类型的参数
* @param &#123;[类型|类型|类型]&#125; 参数 多种类型的参数
* @param &#123;类型&#125; [可选参数] 参数 可选参数用[]包起来
* @return &#123;类型&#125; 说明
* @author 作者 创建时间 修改时间（短日期）改别人代码要留名
* @example 举例（如果需要）
*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>文件头注释<br> 推荐：VScode 文件头部自动生成注释插件：koroFileHeader<br> 快捷键为：ctrl + alt + I<br> <img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/fe3c5592-cfdf-4dad-bcde-559666bf6fc5-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/fe3c5592-cfdf-4dad-bcde-559666bf6fc5-3807603.jpg"></li>
<li>条件注释 <!--[if IE 9]>
     .... some HTML here ....
 <![endif]--></li>
</ol>
<h2 id="HTML规范"><a href="#HTML规范" class="headerlink" title="HTML规范"></a>HTML规范</h2><h3 id="1-通用约定"><a href="#1-通用约定" class="headerlink" title="1.通用约定"></a>1.通用约定</h3><h4 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h4><ul>
<li>自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；</li>
<li>可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )；</li>
<li>尽量减少标签数量；</li>
</ul>
<h4 id="Class-与-ID"><a href="#Class-与-ID" class="headerlink" title="Class 与 ID"></a>Class 与 ID</h4><ul>
<li>class 应以功能或内容命名，不以表现形式命名；</li>
<li>class 与 id 单词字母小写，多个单词组成时，采用驼峰命名法；</li>
<li>使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；</li>
</ul>
<p>eg:</p>
<pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment">&lt;!-- Not recommended --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemHook left contentWrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!-- Recommended --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemHook<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar contentWrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="属性顺序"><a href="#属性顺序" class="headerlink" title="属性顺序"></a>属性顺序</h4><p>HTML 属性应该按照特定的顺序出现以保证易读性。</p>
<ul>
<li>id</li>
<li>class</li>
<li>name</li>
<li>src, for, type, href</li>
<li>title, alt</li>
<li>role</li>
</ul>
<h4 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h4><p>&lt;a&gt;不允许嵌套 &lt;div&gt; 这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如&lt;a&gt;不允许嵌套 &lt;a&gt;。 严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。</p>
<h4 id="语义嵌套约束"><a href="#语义嵌套约束" class="headerlink" title="语义嵌套约束"></a>语义嵌套约束</h4><ul>
<li>&lt;li&gt;用于&lt;ul&gt;或 &lt;ol&gt;下；</li>
<li>&lt;dd&gt;, &lt;dt&gt;用于&lt;dl&gt;下；</li>
<li>&lt;thead&gt;,&lt;tbody&gt;, &lt;tfoot&gt;, &lt;tr&gt;, &lt;td&gt; 用于&lt;table&gt; 下；</li>
</ul>
<h4 id="严格嵌套约束"><a href="#严格嵌套约束" class="headerlink" title="严格嵌套约束"></a>严格嵌套约束</h4><ul>
<li>inline-Level 元素，仅可以包含文本或其它inline-Level元素;</li>
<li>&lt;a&gt;里不可以嵌套交互式元素&lt;a&gt;、&lt;button&gt;、&lt;select&gt;等;</li>
<li>&lt;p&gt;里不可以嵌套块级元素&lt;div&gt;、&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt;、&lt;ul&gt;/&lt;ol&gt;/&lt;li&gt;、&lt;dl&gt;/&lt;dt&gt;/&lt;dd&gt;、&lt;form&gt;等。</li>
</ul>
<h3 id="2-基本文本"><a href="#2-基本文本" class="headerlink" title="2.基本文本"></a>2.基本文本</h3><ul>
<li>使用 HTML5 doctype，不区分大小写。  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li>声明文档使用的字符编码  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li>优先使用 IE 最新版本和 Chrome  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge,chrome=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
</ul>
<h3 id="3-SEO-优化"><a href="#3-SEO-优化" class="headerlink" title="3.SEO 优化"></a>3.SEO 优化</h3><ul>
<li>页面描述</li>
<li>每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>不超过150个字符<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  <span class="token comment">&lt;!-- 页面描述 --></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li>页面关键词  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  <span class="token comment">&lt;!-- 页面关键词 --></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li>定义页面标题  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li>定义网页作者  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name, email@gmail.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  <span class="token comment">&lt;!-- 网页作者 --></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li>定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>robots<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index,follow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  <span class="token comment">&lt;!-- 搜索引擎抓取 --></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
</ul>
<h3 id="4-可选标签"><a href="#4-可选标签" class="headerlink" title="4.可选标签"></a>4.可选标签</h3><ul>
<li><p>为移动设备添加 viewport</p>
  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment">&lt;!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --></span> <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li><p>content 参数：</p>
<ul>
<li>width viewport 宽度(数值/device-width)</li>
<li>height viewport 高度(数值/device-height)</li>
<li>initial-scale 初始缩放比例</li>
<li>maximum-scale 最大缩放比例</li>
<li>minimum-scale 最小缩放比例</li>
<li>user-scalable 是否允许用户缩放(yes/no)</li>
</ul>
</li>
<li><p>页面窗口自动调整到设备宽度，并禁止用户缩放页面</p>
  <pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li><p>电话号码识别<br>  iOS Safari ( Android 或其他浏览器不会) 会自动识别看起来像电话号码的数字，将其处理为电话号码链接，比如：</p>
<ul>
<li>7位数字，形如：1234567</li>
<li>带括号及加号的数字，形如：(+86)123456789</li>
<li>双连接线的数字，形如：00-00-00111</li>
<li>11位数字，形如：13800138000</li>
</ul>
<p>  <img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/b4fb2292-b6bb-4542-b6a9-7336c6e292a4-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/b4fb2292-b6bb-4542-b6a9-7336c6e292a4-3807603.jpg"></p>
</li>
<li><p>邮箱地址的识别<br>  在 Android （ iOS 不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。<br>  <img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/22b8e001-b2f8-4a6f-ae7e-a412622b2c4e-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/22b8e001-b2f8-4a6f-ae7e-a412622b2c4e-3807603.jpg"></p>
</li>
</ul>
<h3 id="5-样式表、脚本加载"><a href="#5-样式表、脚本加载" class="headerlink" title="5.样式表、脚本加载"></a>5.样式表、脚本加载</h3><p>css 样式表在head标签内引用，js 脚本引用在 body 结束标签之前引用。</p>
<h2 id="CSS规范"><a href="#CSS规范" class="headerlink" title="CSS规范"></a>CSS规范</h2><h3 id="1-通用约定-1"><a href="#1-通用约定-1" class="headerlink" title="1.通用约定"></a>1.通用约定</h3><h4 id="声明顺序"><a href="#声明顺序" class="headerlink" title="声明顺序"></a>声明顺序</h4><p>相关的属性声明应当归为一组，并按照下面的顺序排列：</p>
<ol>
<li>Positioning</li>
<li>Box model</li>
<li>Typographic</li>
<li>Visual</li>
<li>Misc</li>
</ol>
<p>由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。<br>其他属性只是影响组件的 内部 或者是不影响前两组属性，因此排在后面。</p>
<blockquote>
<p>完整的属性列表及其排列顺序请参考 Bootstrap property order for Stylelint。</p>
</blockquote>
<p>eg:</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.declaration-order</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">/* Positioning */</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>

  <span class="token comment">/* Box-model */</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>

  <span class="token comment">/* Typography */</span>
  <span class="token property">font</span><span class="token punctuation">:</span> normal 13px <span class="token string">"Helvetica Neue"</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  <span class="token comment">/* Visual */</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f5f5f5<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #e5e5e5<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>

  <span class="token comment">/* Misc */</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="链接的样式顺序"><a href="#链接的样式顺序" class="headerlink" title="链接的样式顺序"></a>链接的样式顺序</h4><pre class="line-numbers language-none"><code class="language-none">a:link -&gt; a:visited -&gt; a:hover -&gt; a:active（LoVeHAte）<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h4 id="命名"><a href="#命名" class="headerlink" title="命名"></a>命名</h4><ul>
<li>命名必须由单词、中划线①数字组成；</li>
<li>使用驼峰命名法</li>
<li>不允许使用拼音（约定俗成的除外，如：youku, baidu），尤其是缩写的拼音、拼音与英文的混合。 </li>
</ul>
<p>不推荐：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.xiangqing</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.news_list</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.zhuti</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p>推荐</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.detail</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.news-list</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.topic</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>①使用中划线 “-” 作为连接字符，而不是下划线 “_”。 2种方式都有不少支持者，但 “-“ 能让你少按一次shift键，并且更符合CSS原生语法，所以只选一种目前普遍使用的方式</p>
</blockquote>
<h4 id="词汇规范"><a href="#词汇规范" class="headerlink" title="词汇规范"></a>词汇规范</h4><ul>
<li>不依据表现形式来命名；</li>
<li>可根据内容来命名；</li>
<li>可根据功能来命名。</li>
</ul>
<p>不推荐：</p>
<pre class="line-numbers language-none"><code class="language-none">left, right, center, red, black<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p>推荐：</p>
<pre class="line-numbers language-none"><code class="language-none">nav, aside, news, type, search<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h4 id="缩写规范"><a href="#缩写规范" class="headerlink" title="缩写规范"></a>缩写规范</h4><ul>
<li>保证缩写后还能较为清晰保持原单词所能表述的意思；</li>
<li>使用业界熟知的或者约定俗成的。</li>
</ul>
<p>不推荐：</p>
<pre class="line-numbers language-none"><code class="language-none">navigation   &#x3D;&gt;  navi 
header       &#x3D;&gt;  head
description  &#x3D;&gt;  des<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p>推荐：</p>
<pre class="line-numbers language-none"><code class="language-none">navigation   &#x3D;&gt;  nav 
header       &#x3D;&gt;  hd
description  &#x3D;&gt;  desc<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h4 id="前缀规范"><a href="#前缀规范" class="headerlink" title="前缀规范"></a>前缀规范</h4><table>
<thead>
<tr>
<th>前缀</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody><tr>
<td>g-</td>
<td>全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式</td>
<td>g-mod</td>
</tr>
<tr>
<td>m-</td>
<td>模块命名方式</td>
<td>m-detail</td>
</tr>
<tr>
<td>ui-</td>
<td>组件命名方式</td>
<td>ui-selector</td>
</tr>
<tr>
<td>js-</td>
<td>所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限</td>
<td>js-switch</td>
</tr>
</tbody></table>
<p>选择器必须是以某个前缀开头</p>
<p>不推荐：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.info</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.current</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.news</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>这样将会带来不可预知的管理麻烦以及沉重的包袱。你永远也不会知道哪些样式名已经被用掉了，如果你是一个新人，你可能会遭遇，你每定义个样式名，都有同名的样式已存在，然后你只能是换样式名或者覆盖规则。</p>
</blockquote>
<p>推荐：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.m-detail .info</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.m-detail .current</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">.m-detail .news</span> <span class="token punctuation">&#123;</span> sRules<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的，意思就是说所有的规则都必须在某个相对的作用域下才生效，尽可能减少全局污染。js- 这种级别的className完全交由JSer自定义，但是命名的规则也可以保持跟重构一致，比如说不能使用拼音之类的</p>
</blockquote>
<h4 id="选择器权重等级"><a href="#选择器权重等级" class="headerlink" title="选择器权重等级"></a>选择器权重等级</h4><p>a = 行内样式style。 b = ID选择器的数量。 c = 类、伪类和属性选择器的数量。 d = 类型选择器和伪元素选择器的数量。</p>
<table>
<thead>
<tr>
<th>选择器</th>
<th>等级 (a,b,c,d)</th>
</tr>
</thead>
<tbody><tr>
<td>style=””</td>
<td>1,0,0,0</td>
</tr>
<tr>
<td>#wrapper #content {}</td>
<td>0,2,0,0</td>
</tr>
<tr>
<td>#content .dateposted {}</td>
<td>0,1,1,0</td>
</tr>
<tr>
<td>div#content {}</td>
<td>0,1,0,1</td>
</tr>
<tr>
<td>#content p {}</td>
<td>0,1,0,1</td>
</tr>
<tr>
<td>#content {}</td>
<td>0,1,0,0</td>
</tr>
<tr>
<td>p.comment .dateposted {}</td>
<td>0,0,2,1</td>
</tr>
<tr>
<td>div.comment p {}</td>
<td>0,0,1,2</td>
</tr>
<tr>
<td>.comment p {}</td>
<td>0,0,1,1</td>
</tr>
<tr>
<td>p.comment {}</td>
<td>0,0,1,1</td>
</tr>
<tr>
<td>.comment {}</td>
<td>0,0,1,0</td>
</tr>
<tr>
<td>div p {}</td>
<td>0,0,0,2</td>
</tr>
<tr>
<td>p {}</td>
<td>0,0,0,1</td>
</tr>
</tbody></table>
<h4 id="简写-省略-缩写"><a href="#简写-省略-缩写" class="headerlink" title="简写/省略/缩写"></a>简写/省略/缩写</h4><p><strong>属性值书写尽量使用缩写</strong><br>CSS很多属性都支持缩写shorthand （例如 font ） 尽量使用缩写，甚至只设置一个值。 使用缩写可以提高代码的效率和方便理解。<br><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/72c6e807-1653-4e90-be26-e7bee8b3d199-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/72c6e807-1653-4e90-be26-e7bee8b3d199-3807603.jpg"></p>
<p><strong>省略0后面的单位</strong><br>非必要的情况下 0 后面不用加单位。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span><span class="token punctuation">&#123;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p><strong>省略0开头小数点前面的0</strong><br>值或长度在-1与1之间的小数，小数前的 0 可以忽略不写。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span><span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> .8em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p><strong>省略URI外的引号</strong><br>不要在 url() 里用 ( “” , ” ) 。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>//www.google.com/css/go.css<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span> <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p><strong>十六进制尽可能使用3个字符</strong><br>加颜色值时候会用到它，使用3个字符的十六进制更短与简洁。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token property">color</span><span class="token punctuation">:</span> #eebbcc<span class="token punctuation">;</span>

<span class="token comment">/* Recommended*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> #ebc<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="2-Less-和-Sass"><a href="#2-Less-和-Sass" class="headerlink" title="2.Less 和 Sass"></a>2.Less 和 Sass</h3><h4 id="操作符"><a href="#操作符" class="headerlink" title="操作符"></a>操作符</h4><p>为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token comment">// Not recommended</span>
<span class="token selector">.element</span> <span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 10px 0 <span class="token variable">@variable</span><span class="token operator">*</span>2 10px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">// Recommended</span>
<span class="token selector">.element</span> <span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 10px 0 <span class="token punctuation">(</span><span class="token variable">@variable</span> <span class="token operator">*</span> 2<span class="token punctuation">)</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="嵌套-1"><a href="#嵌套-1" class="headerlink" title="嵌套"></a>嵌套</h4><p>避免不必要的嵌套。因为虽然可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token comment">// Not recommended</span>
<span class="token selector">.table > thead > tr > th</span> <span class="token punctuation">&#123;</span>...<span class="token punctuation">&#125;</span>
<span class="token selector">.table > thead > tr > td</span> <span class="token punctuation">&#123;</span>...<span class="token punctuation">&#125;</span>
<span class="token comment">// Recommended</span>
<span class="token selector">.table > thead > tr ></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">> th</span> <span class="token punctuation">&#123;</span>...<span class="token punctuation">&#125;</span>
  <span class="token selector">> td</span> <span class="token punctuation">&#123;</span>...<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="代码组织"><a href="#代码组织" class="headerlink" title="代码组织"></a>代码组织</h4><p>代码按一下顺序组织：</p>
<ol>
<li>@import</li>
<li>变量声明</li>
<li>样式声明</li>
</ol>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token variable">@import</span> <span class="token string">"mixins/size.less"</span><span class="token punctuation">;</span>

<span class="token variable">@default-text-color<span class="token punctuation">:</span></span> #333<span class="token punctuation">;</span>

<span class="token selector">.page</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 960px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="混入（Mixin）"><a href="#混入（Mixin）" class="headerlink" title="混入（Mixin）"></a>混入（Mixin）</h4><ol>
<li>在定义 mixin 时，如果 mixin 名称不是一个需要使用的 className，必须加上括号，否则即使不被调用也会输出到 CSS 中。</li>
<li>如果混入的是本身不输出内容的 mixin，需要在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className。</li>
</ol>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/205a84d2-3e9b-4bf0-a04d-a8f4ebda7f41-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/205a84d2-3e9b-4bf0-a04d-a8f4ebda7f41-3807603.jpg"></p>
<h4 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h4><ul>
<li>每个模块必须是一个独立的样式文件，文件名与模块名一致；</li>
<li>模块样式的选择器必须以模块名开头以作范围约定；</li>
</ul>
<blockquote>
<p>任何超过3级的选择器，需要思考是否必要，是否有无歧义的，能唯一命中的更简短的写法</p>
</blockquote>
<h3 id="3-hack规范"><a href="#3-hack规范" class="headerlink" title="3.hack规范"></a>3.hack规范</h3><p><strong>什么是CSS Hack？</strong><br>由于不同的浏览器，比如IE 6，IE 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，不同内核的浏览器之间页面效果存在差异。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中实现页面效果的一致性。针对不同的浏览器写不同的CSS Code的过程，就叫CSS hack。 我们写 ie 和 firefox 的css hack，可以认为，兼容火狐浏览器，一般情况下都会兼容chorme、oprea、safari浏览器。firefox和它们还是有细微的区别，如果 html和css结构规范，一般情况下还是可以认为：兼容firefox，即兼容了chrome、oprea、safari，因为它们是同一个阵型的。另 外，firefox3.5以上的版本，和ie8兼容性接近。</p>
<ul>
<li>尽可能的减少对Hack的使用和依赖，如果在项目中对Hack的使用太多太复杂，对项目的维护将是一个巨大的挑战；</li>
<li>使用其它的解决方案代替Hack思路；</li>
<li>如果非Hack不可，选择稳定且常用并易于理解的。</li>
</ul>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.test</span> <span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>       <span class="token comment">/* For all */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #111\9<span class="token punctuation">;</span>     <span class="token comment">/* For all IE */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #222\0<span class="token punctuation">;</span>     <span class="token comment">/* For IE8 and later, Opera without Webkit */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #333\9\0<span class="token punctuation">;</span>   <span class="token comment">/* For IE8 and later */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #444\0/<span class="token punctuation">;</span>    <span class="token comment">/* For IE8 and later */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>      <span class="token comment">/* For IE7 and earlier */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #777<span class="token punctuation">;</span>      <span class="token comment">/* For IE6 and earlier */</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>注：严谨且长期的项目，针对IE可以使用条件注释作为预留Hack或者在当前使用</p>
</blockquote>
<h4 id="IE条件注释语法："><a href="#IE条件注释语法：" class="headerlink" title="IE条件注释语法："></a>IE条件注释语法：</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment">&lt;!--[if &lt;keywords>? IE &lt;version>?]>
&lt;link rel="stylesheet" href="*.css" />
&lt;![endif]--></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p>语法说明：</p>
<ul>
<li>keywords<ul>
<li>if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本</li>
<li>是否：指定是否IE或IE某个版本。关键字：空</li>
<li>大于：选择大于指定版本的IE版本。关键字：gt（greater than）</li>
<li>大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）</li>
<li>小于：选择小于指定版本的IE版本。关键字：lt（less than）</li>
<li>小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）</li>
<li>非指定版本：选择除指定版本外的所有IE版本。关键字：!</li>
</ul>
</li>
<li>version<br>目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性</li>
</ul>
<h3 id="4-动画与转换"><a href="#4-动画与转换" class="headerlink" title="4.动画与转换"></a>4.动画与转换</h3><p>使用 transition 时应指定 transition-property。<br>eg:</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* good */</span>
<span class="token selector">.box</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> color 1s<span class="token punctuation">,</span> border-color 1s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/* bad */</span>
<span class="token selector">.box</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> all 1s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>在浏览器能高效实现的属性上添加过渡和动画。在可能的情况下应选择这样四种变换：</p>
<ul>
<li>transform: translate(npx, npx);</li>
<li>transform: scale(n);</li>
<li>transform: rotate(ndeg);</li>
<li>opacity: 0..1;</li>
</ul>
<p>典型的，可以使用 translate 来代替 left 作为动画属性。</p>
<blockquote>
<p>示例：一般在 Chrome 中，3D或透视变换（perspective transform）CSS属性和对 opacity 进行 CSS 动画会创建新的图层，在硬件加速渲染通道的优化下，GPU 完成 3D 变形等操作后，将图层进行复合操作（Compesite Layers），从而避免触发浏览器大面积 重绘 和 重排。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* good */</span>
<span class="token selector">.box</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> transform 1s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.box:hover</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>20px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* move right for 20px */</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/* bad */</span>
<span class="token selector">.box</span> <span class="token punctuation">&#123;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> left 1s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.box:hover</span> <span class="token punctuation">&#123;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/* move right for 20px */</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>动画的基本概念：</p>
<ul>
<li>帧：在动画过程中，每一幅静止画面即为一“帧”;</li>
<li>帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second);</li>
<li>帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒);</li>
<li>跳帧(掉帧/丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。</li>
<li>如果使用基于 javaScript 的动画，尽量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.</li>
<li>避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。</li>
<li>使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。</li>
</ul>
<blockquote>
<p>一般浏览器的渲染刷新频率是60 fps，所以在网页当中，帧率如果达到 50-60 fps 的动画将会相当流畅，让人感到舒适。</p>
</blockquote>
<h3 id="5-性能优化"><a href="#5-性能优化" class="headerlink" title="5.性能优化"></a>5.性能优化</h3><h4 id="慎重选择高消耗的样式"><a href="#慎重选择高消耗的样式" class="headerlink" title="慎重选择高消耗的样式"></a>慎重选择高消耗的样式</h4><p>高消耗属性在绘制前需要浏览器进行大量计算：</p>
<ul>
<li>box-shadows</li>
<li>border-radius</li>
<li>transparency</li>
<li>transforms</li>
<li>CSS filters（性能杀手）</li>
</ul>
<h4 id="正确使用-Display-的属性"><a href="#正确使用-Display-的属性" class="headerlink" title="正确使用 Display 的属性"></a>正确使用 Display 的属性</h4><p>Display 属性会影响页面的渲染，请合理使用。</p>
<ul>
<li>display: inline后不应该再使用 width、height、margin、padding 以及 float；</li>
<li>display: inline-block 后不应该再使用 float；</li>
<li>display: block 后不应该再使用 vertical-align；</li>
<li>display: table-* 后不应该再使用 margin 或者 float；</li>
</ul>
<h4 id="提升-CSS-选择器性能"><a href="#提升-CSS-选择器性能" class="headerlink" title="提升 CSS 选择器性能"></a>提升 CSS 选择器性能</h4><p>CSS 选择器是从右到左进行规则匹配。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。最右边选择符称之为关键选择器。<br>CSS 选择器的执行效率从高到低做一个排序：</p>
<ol>
<li>id选择器（#myid）</li>
<li>类选择器（.myclassname）</li>
<li>标签选择器（div,h1,p）</li>
<li>相邻选择器（h1+p）</li>
<li>子选择器（ul &lt; li）</li>
<li>后代选择器（li a）</li>
<li>通配符选择器（*）</li>
<li>属性选择器（a[rel=”external”]）</li>
<li>伪类选择器（a:hover, li:nth-child）</li>
</ol>
<h4 id="避免使用通用选择器"><a href="#避免使用通用选择器" class="headerlink" title="避免使用通用选择器"></a>避免使用通用选择器</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token selector">.content *</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
<p>浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。</p>
<h4 id="避免使用标签或-class-选择器限制-id-选择器"><a href="#避免使用标签或-class-选择器限制-id-选择器" class="headerlink" title="避免使用标签或 class 选择器限制 id 选择器"></a>避免使用标签或 class 选择器限制 id 选择器</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token selector">button#backButton</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span>
<span class="token comment">/* Recommended */</span>
<span class="token selector">#newMenuIcon</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="避免使用标签限制-class-选择器"><a href="#避免使用标签限制-class-选择器" class="headerlink" title="避免使用标签限制 class 选择器"></a>避免使用标签限制 class 选择器</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token selector">treecell.indented</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span>
<span class="token comment">/* Recommended */</span>
<span class="token selector">.treecell-indented</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span>
<span class="token comment">/* Much to recommended */</span>
<span class="token selector">.hierarchy-deep</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="避免使用多层标签选择器。"><a href="#避免使用多层标签选择器。" class="headerlink" title="避免使用多层标签选择器。"></a>避免使用多层标签选择器。</h4><p>使用 class 选择器替换，减少css查找</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token selector">treeitem[mailfolder="true"] > treerow > treecell</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span>
<span class="token comment">/* Recommended */</span>
<span class="token selector">.treecell-mailfolder</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="避免使用子选择器"><a href="#避免使用子选择器" class="headerlink" title="避免使用子选择器"></a>避免使用子选择器</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token selector">treehead treerow treecell</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span>
<span class="token comment">/* Recommended */</span>
<span class="token selector">treehead > treerow > treecell</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span>
<span class="token comment">/* Much to recommended */</span>
<span class="token selector">.treecell-header</span> <span class="token punctuation">&#123;</span>…<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="使用继承"><a href="#使用继承" class="headerlink" title="使用继承"></a>使用继承</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Not recommended */</span>
<span class="token selector">#bookmarkMenuItem > .menu-left</span> <span class="token punctuation">&#123;</span> <span class="token property">list-style-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>blah<span class="token punctuation">)</span></span> <span class="token punctuation">&#125;</span>
<span class="token comment">/* Recommended */</span>
<span class="token selector">#bookmarkMenuItem</span> <span class="token punctuation">&#123;</span> <span class="token property">list-style-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>blah<span class="token punctuation">)</span></span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="JavaScript规范"><a href="#JavaScript规范" class="headerlink" title="JavaScript规范"></a>JavaScript规范</h2><h3 id="1-通用约定-2"><a href="#1-通用约定-2" class="headerlink" title="1.通用约定"></a>1.通用约定</h3><p><strong>注释原则</strong></p>
<ul>
<li>As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。</li>
<li>As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。</li>
</ul>
<h4 id="命名-1"><a href="#命名-1" class="headerlink" title="命名"></a>命名</h4><p><strong>变量</strong> 使用驼峰命名。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> loadingModules <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p><strong>私有属性、变量</strong>和<strong>方法</strong>以下划线 _ 开头。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> _that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p><strong>常量</strong> 使用全部字母大写且用const。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token constant">MAXCOUNT</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h4 id="二元和三元操作符"><a href="#二元和三元操作符" class="headerlink" title="二元和三元操作符"></a>二元和三元操作符</h4><p>操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> x <span class="token operator">=</span> a <span class="token operator">?</span> b <span class="token operator">:</span> c<span class="token punctuation">;</span>
<span class="token keyword">let</span> y <span class="token operator">=</span> a <span class="token operator">?</span>
    longButSimpleOperandB <span class="token operator">:</span> longButSimpleOperandC<span class="token punctuation">;</span>
<span class="token keyword">let</span> z <span class="token operator">=</span> a <span class="token operator">?</span>
        moreComplicatedB <span class="token operator">:</span>
        moreComplicatedC<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>操作符也是如此：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> x <span class="token operator">=</span> foo<span class="token punctuation">.</span><span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
    <span class="token function">doSomethingElse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h4 id="条件-三元-操作符"><a href="#条件-三元-操作符" class="headerlink" title="条件(三元)操作符 ( ? : )"></a>条件(三元)操作符 ( ? : )</h4><p>三元操作符用于替代 if 条件判断语句。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// Not recommended</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">!=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span> <span class="token keyword">else</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">// Recommended</span>
<span class="token keyword">return</span> val <span class="token operator">?</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="具备强类型的设计"><a href="#具备强类型的设计" class="headerlink" title="具备强类型的设计"></a>具备强类型的设计</h4><p><strong>解释：</strong></p>
<ul>
<li>如果一个属性被设计为 boolean 类型，则不要使用 1 或 0 作为其值。对于标识性的属性，如对代码体积有严格要求，可以从一开始就设计为 number 类型且将 0 作为否定值。</li>
<li>从 DOM 中取出的值通常为 string 类型，如果有对象或函数的接收类型为 number 类型，提前作好转换，而不是期望对象、函数可以处理多类型的值。</li>
</ul>
<h3 id="2-函数设计"><a href="#2-函数设计" class="headerlink" title="2.函数设计"></a>2.函数设计</h3><blockquote>
<p>函数设计基本原则：低耦合，高内聚。（假如一个程序有50个函数；一旦你修改其中一个函数，其他49个函数都需要做修改，这就是高耦合的后果。）</p>
</blockquote>
<h4 id="函数长度"><a href="#函数长度" class="headerlink" title="函数长度"></a>函数长度</h4><p><strong>建议</strong>一个函数的长度控制在 50 行以内。 将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。 特定算法等不可分割的逻辑允许例外。</p>
<p>例：<br><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/79726943-7739-4e24-82ed-cfcaacbf90aa-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/79726943-7739-4e24-82ed-cfcaacbf90aa-3807603.jpg"></p>
<h4 id="参数设计"><a href="#参数设计" class="headerlink" title="参数设计"></a>参数设计</h4><p><strong>建议</strong>一个函数的参数控制在 6 个以内。<br>解释：</p>
<p>除去不定长参数以外，函数具备不同逻辑意义的参数建议控制在 6 个以内，过多参数会导致维护难度增大。<br>某些情况下，如使用 AMD Loader 的 require 加载多个模块时，其 callback可能会存在较多参数，因此对函数参数的个数不做强制限制。</p>
<p><strong>建议</strong>通过 options 参数传递非数据输入型参数。 解释：</p>
<p>有些函数的参数并不是作为算法的输入，而是对算法的某些分支条件判断之用，此类参数建议通过一个 options 参数传递。</p>
<p>如下函数：<br><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/70643c97-3bbb-40f6-ae34-4b8bb1ec46eb-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/70643c97-3bbb-40f6-ae34-4b8bb1ec46eb-3807603.jpg"></p>
<p>可以转换为下面的函数：<br><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/3ca131b4-6b3c-4128-b5a5-cf13872a0f7d-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/3ca131b4-6b3c-4128-b5a5-cf13872a0f7d-3807603.jpg"></p>
<p>这种模式有几个显著的优势：</p>
<ul>
<li>boolean 型的配置项具备名称，从调用的代码上更易理解其表达的逻辑意义。</li>
<li>当配置项有增长时，无需无休止地增加参数个数，不会出现 removeElement(element, true, false, false, 3) 这样难以理解的调用代码。</li>
<li>当部分配置参数可选时，多个参数的形式非常难处理重载逻辑，而使用一个 options 对象只需判断属性是否存在，实现得以简化。</li>
</ul>
<h4 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h4><p>当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。</p>
<ul>
<li>为什么？因为箭头函数创造了新的一个 this 执行环境，通常情况下都能满足你的需求，而且这样的写法更为简洁。</li>
<li>为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。</li>
</ul>
<p>eg:</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// Not recommended</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Recommended</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。</p>
<ul>
<li>为什么？语法糖。在链式调用中可读性很高。 为什么不？当你打算回传一个对象的时候。</li>
</ul>
<p>eg:</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// Recommended</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> x <span class="token operator">*</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Recommended</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> n</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> total <span class="token operator">+</span> n<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="函数和变量"><a href="#函数和变量" class="headerlink" title="函数和变量"></a>函数和变量</h4><p>同一个函数内部，局部变量的声明必须置于顶端 因为即使放到中间，js解析器也会提升至顶部（hosting）<br>eg:</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// Recommended</span>
<span class="token keyword">var</span> <span class="token function-variable function">clear</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> id <span class="token operator">=</span> el<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
        name <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"data-name"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">...</span><span class="token operator">...</span><span class="token operator">...</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// Not recommended</span>
<span class="token keyword">var</span> <span class="token function-variable function">clear</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> id <span class="token operator">=</span> el<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
    <span class="token operator">...</span><span class="token operator">...</span>
    <span class="token keyword">var</span> name <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"data-name"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">...</span><span class="token operator">...</span><span class="token operator">...</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="块内函数必须用局部变量声明"><a href="#块内函数必须用局部变量声明" class="headerlink" title="块内函数必须用局部变量声明"></a>块内函数必须用局部变量声明</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// Not recommended</span>
<span class="token keyword">var</span> <span class="token function-variable function">call</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>name <span class="token operator">==</span> <span class="token string">"hotel"</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"hotel foo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>

    foo <span class="token operator">&amp;&amp;</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// Recommended</span>
<span class="token keyword">var</span> <span class="token function-variable function">call</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> foo<span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>name <span class="token operator">==</span> <span class="token string">"hotel"</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"hotel foo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>

    foo <span class="token operator">&amp;&amp;</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>引起的bug：第一种写法foo的声明被提前了; 调用call时：第一种写法会调用foo函数，第二种写法不会调用foo函数</p>
</blockquote>
<h4 id="空函数"><a href="#空函数" class="headerlink" title="空函数"></a>空函数</h4><p><strong>建议</strong>对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享。<br>eg:<br><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/5293e8a1-ab11-4a9f-99c7-07aded6d933d-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/5293e8a1-ab11-4a9f-99c7-07aded6d933d-3807603.jpg"></p>
<h3 id="3-性能优化"><a href="#3-性能优化" class="headerlink" title="3.性能优化"></a>3.性能优化</h3><h4 id="避免不必要的-DOM-操作"><a href="#避免不必要的-DOM-操作" class="headerlink" title="避免不必要的 DOM 操作"></a>避免不必要的 DOM 操作</h4><p>浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，就避免多次查询 DOM 树了。</p>
<h4 id="缓存数组长度"><a href="#缓存数组长度" class="headerlink" title="缓存数组长度"></a>缓存数组长度</h4><p>循环无疑是和 JavaScript 性能非常相关的一部分。通过存储数组的长度，可以有效避免每次循环重新计算。</p>
<blockquote>
<p>注: 虽然现代浏览器引擎会自动优化这个过程，但是不要忘记还有旧的浏览器。</p>
</blockquote>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    len<span class="token punctuation">,</span> i<span class="token punctuation">;</span><span class="token comment">// Recommended - size is calculated only 1 time and then stored</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>

<span class="token punctuation">&#125;</span>
<span class="token comment">// Not recommended - size needs to be recalculated 1000 times</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>

<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="优化-JavaScript-的特征"><a href="#优化-JavaScript-的特征" class="headerlink" title="优化 JavaScript 的特征"></a>优化 JavaScript 的特征</h4><ul>
<li>编写可维护的代码</li>
<li>单变量模式</li>
<li>Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）</li>
<li>不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）</li>
<li>不要用隐含的类型转换</li>
<li>不要用 eval()</li>
<li>用 parseInt() 进行数字转换</li>
<li>（规范）左大括号的位置</li>
<li>构造器首字母大写</li>
<li>写注释</li>
<li>不要用 void</li>
<li>不要用 with 语句</li>
<li>不要用 continue 语句</li>
<li>尽量不要用位运算</li>
</ul>
<h4 id="优化-JavaScript-执行"><a href="#优化-JavaScript-执行" class="headerlink" title="优化 JavaScript 执行"></a>优化 JavaScript 执行</h4><p>在页面加载的时候，通常会有很多脚本等待执行，但你可以设定优先级。下面的顺序就是基于用户反馈设定的优先级：</p>
<ol>
<li>改变页面视觉习性的脚本绝对要首先执行。这包括任何的字体调整、盒子布局、或IE6 pngfix。</li>
<li>页面内容初始化</li>
<li>页面标题、顶部导航和页脚的初始化</li>
<li>绑定事件处理器</li>
<li>网页流量分析、Doubleclick，以及其他第三方脚本</li>
</ol>
<h4 id="异步加载第三方内容"><a href="#异步加载第三方内容" class="headerlink" title="异步加载第三方内容"></a>异步加载第三方内容</h4><p>当你无法保证嵌入第三方内容比如 Youtube 视频或者一个 like/tweet 按钮可以正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。<br>eg:<br><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/3faebd97-e616-4e9d-b3f0-40a1f6b2a2a3-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/3faebd97-e616-4e9d-b3f0-40a1f6b2a2a3-3807603.jpg"></p>
<h3 id="5-调试"><a href="#5-调试" class="headerlink" title="5.调试"></a>5.调试</h3><p>浏览器的怪异性会不可避免地产生一些问题。有几个工具可以帮助优化代码的健全性和加载速度。推荐先在Google Chrome和Firefox做开发，然后用Safari上和Opera，最后针对IE用条件判断做一些额外的微调。下面列出的是一些有帮助的调试器和速度分析器：</p>
<ul>
<li>Google Chrome: Developer Tools</li>
<li>Firefox: Firebug, Page Speed, YSlow</li>
<li>Safari: Web Inspector</li>
<li>Opera: Dragonfly</li>
<li>Internet Explorer 6-7: Developer Toolbar</li>
<li>Internet Explorer 8-10: Developer Tools</li>
</ul>
<h2 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h2><p><strong>开发规范请看</strong><a href="">vue开发规范</a></p>
<h2 id="react"><a href="#react" class="headerlink" title="react"></a>react</h2><p><strong>开发规范请看</strong><a href="">react开发规范</a></p>
<h2 id="angular"><a href="#angular" class="headerlink" title="angular"></a>angular</h2><p><strong>开发规范请看</strong><a href="">angular开发规范</a></p>

  </div>
  <div>
    
  </div>
</article>
<div class="nav">
  
    <div class="nav-item-prev">
      <a 
        href="/2021/06/13/FEVUEDevelopmentSpecification/" 
        class="nav-link">
        <i class="iconfont icon-left nav-prev-icon"></i>
        <div>
          <div class="nav-label">上一篇</div>
          
            <div class="nav-title">vue开发规范 </div>
          
        </div>
      </a>
    </div>
  
  
    <div class="nav-item-next">
      <a 
        href="/2021/06/13/exampleOfScriptCodeForGeneratingVideoNoiseGIFs/" 
        class="nav-link">
        <div>
          <div class="nav-label">下一篇</div>
          
            <div class="nav-title">客户端网页/屏幕生成视频噪音动图的脚本代码例子 </div>
          
        </div>
        <i class="iconfont icon-right nav-next-icon"></i>
      </a>
    </div>
  
</div>

<div 
  class="card card-content toc-card" 
  id="mobiletoc">
  <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9B%A0"><span class="toc-text">原因</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-text">通用书写规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E5%8E%9F%E5%88%99%EF%BC%9A%E7%BB%93%E6%9E%84%E3%80%81%E6%A0%B7%E5%BC%8F%E3%80%81%E8%A1%8C%E4%B8%BA%E5%88%86%E7%A6%BB"><span class="toc-text">1. 基本原则：结构、样式、行为分离</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%96%87%E4%BB%B6-%E8%B5%84%E6%BA%90%E5%91%BD%E5%90%8D"><span class="toc-text">2.文件&#x2F;资源命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%9C%81%E7%95%A5%E5%A4%96%E9%93%BE%E8%B5%84%E6%BA%90-URL-%E5%8D%8F%E8%AE%AE%E9%83%A8%E5%88%86"><span class="toc-text">3.省略外链资源 URL 协议部分</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%86%99%E6%B3%A8%E9%87%8A"><span class="toc-text">4.写注释</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E8%A7%84%E8%8C%83"><span class="toc-text">HTML规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-text">标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Class-%E4%B8%8E-ID"><span class="toc-text">Class 与 ID</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E9%A1%BA%E5%BA%8F"><span class="toc-text">属性顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97"><span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%AD%E4%B9%89%E5%B5%8C%E5%A5%97%E7%BA%A6%E6%9D%9F"><span class="toc-text">语义嵌套约束</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%A5%E6%A0%BC%E5%B5%8C%E5%A5%97%E7%BA%A6%E6%9D%9F"><span class="toc-text">严格嵌套约束</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%9F%BA%E6%9C%AC%E6%96%87%E6%9C%AC"><span class="toc-text">2.基本文本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-SEO-%E4%BC%98%E5%8C%96"><span class="toc-text">3.SEO 优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8F%AF%E9%80%89%E6%A0%87%E7%AD%BE"><span class="toc-text">4.可选标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%A0%B7%E5%BC%8F%E8%A1%A8%E3%80%81%E8%84%9A%E6%9C%AC%E5%8A%A0%E8%BD%BD"><span class="toc-text">5.样式表、脚本加载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E8%A7%84%E8%8C%83"><span class="toc-text">CSS规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A-1"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E9%A1%BA%E5%BA%8F"><span class="toc-text">声明顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%A1%BA%E5%BA%8F"><span class="toc-text">链接的样式顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E5%90%8D"><span class="toc-text">命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%8D%E6%B1%87%E8%A7%84%E8%8C%83"><span class="toc-text">词汇规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%A9%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-text">缩写规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%BC%80%E8%A7%84%E8%8C%83"><span class="toc-text">前缀规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E6%9D%83%E9%87%8D%E7%AD%89%E7%BA%A7"><span class="toc-text">选择器权重等级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%80%E5%86%99-%E7%9C%81%E7%95%A5-%E7%BC%A9%E5%86%99"><span class="toc-text">简写&#x2F;省略&#x2F;缩写</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Less-%E5%92%8C-Sass"><span class="toc-text">2.Less 和 Sass</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">操作符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97-1"><span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87"><span class="toc-text">代码组织</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%B7%E5%85%A5%EF%BC%88Mixin%EF%BC%89"><span class="toc-text">混入（Mixin）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-text">模块化</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-hack%E8%A7%84%E8%8C%83"><span class="toc-text">3.hack规范</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#IE%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="toc-text">IE条件注释语法：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8A%A8%E7%94%BB%E4%B8%8E%E8%BD%AC%E6%8D%A2"><span class="toc-text">4.动画与转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-text">5.性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%85%8E%E9%87%8D%E9%80%89%E6%8B%A9%E9%AB%98%E6%B6%88%E8%80%97%E7%9A%84%E6%A0%B7%E5%BC%8F"><span class="toc-text">慎重选择高消耗的样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8-Display-%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-text">正确使用 Display 的属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%90%E5%8D%87-CSS-%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%A7%E8%83%BD"><span class="toc-text">提升 CSS 选择器性能</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E9%80%9A%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用通用选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E6%88%96-class-%E9%80%89%E6%8B%A9%E5%99%A8%E9%99%90%E5%88%B6-id-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用标签或 class 选择器限制 id 选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E9%99%90%E5%88%B6-class-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用标签限制 class 选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E5%A4%9A%E5%B1%82%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82"><span class="toc-text">避免使用多层标签选择器。</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E5%AD%90%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用子选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E7%BB%A7%E6%89%BF"><span class="toc-text">使用继承</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E8%A7%84%E8%8C%83"><span class="toc-text">JavaScript规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A-2"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E5%90%8D-1"><span class="toc-text">命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%85%83%E5%92%8C%E4%B8%89%E5%85%83%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">二元和三元操作符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6-%E4%B8%89%E5%85%83-%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">条件(三元)操作符 ( ? : )</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B7%E5%A4%87%E5%BC%BA%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%AE%BE%E8%AE%A1"><span class="toc-text">具备强类型的设计</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%87%BD%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="toc-text">2.函数设计</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E9%95%BF%E5%BA%A6"><span class="toc-text">函数长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="toc-text">参数设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-text">箭头函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%92%8C%E5%8F%98%E9%87%8F"><span class="toc-text">函数和变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9D%97%E5%86%85%E5%87%BD%E6%95%B0%E5%BF%85%E9%A1%BB%E7%94%A8%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E"><span class="toc-text">块内函数必须用局部变量声明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%A9%BA%E5%87%BD%E6%95%B0"><span class="toc-text">空函数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-text">3.性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84-DOM-%E6%93%8D%E4%BD%9C"><span class="toc-text">避免不必要的 DOM 操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98%E6%95%B0%E7%BB%84%E9%95%BF%E5%BA%A6"><span class="toc-text">缓存数组长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%98%E5%8C%96-JavaScript-%E7%9A%84%E7%89%B9%E5%BE%81"><span class="toc-text">优化 JavaScript 的特征</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%98%E5%8C%96-JavaScript-%E6%89%A7%E8%A1%8C"><span class="toc-text">优化 JavaScript 执行</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%AC%AC%E4%B8%89%E6%96%B9%E5%86%85%E5%AE%B9"><span class="toc-text">异步加载第三方内容</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E8%B0%83%E8%AF%95"><span class="toc-text">5.调试</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue"><span class="toc-text">vue</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react"><span class="toc-text">react</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#angular"><span class="toc-text">angular</span></a></li></ol>
</div></main>
            <aside class="left-column">
              
              <div class="card card-author">
                
  <img 
    src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
    class="author-img" 
    alt="author avatar">

<p class="author-name">霜序廿</p>
<p class="author-description">无限进步</p>
<div class="author-message">
  <a 
    class="author-posts-count" 
    href="/archives">
    <span>253</span>
    <span>文章</span>
  </a>
  <a 
    class="author-categories-count" 
    href="/categories">
    <span>6</span>
    <span>分类</span>
  </a>
  <a 
    class="author-tags-count" 
    href="/tags">
    <span>51</span>
    <span>标签</span>
  </a>
</div>

  <div class="author-card-society">
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://github.com/shuangxunian">
          <i class="iconfont icon-github society-icon"></i>
        </a>
      </div>
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://space.bilibili.com/391117803">
          <i class="iconfont icon-bilibili society-icon"></i>
        </a>
      </div>
    
  </div>

              </div>
               <div class="sticky-tablet">
  
  
    <article class="display-when-two-columns spacer">
      <div class="card card-content toc-card">
        <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9B%A0"><span class="toc-text">原因</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-text">通用书写规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E5%8E%9F%E5%88%99%EF%BC%9A%E7%BB%93%E6%9E%84%E3%80%81%E6%A0%B7%E5%BC%8F%E3%80%81%E8%A1%8C%E4%B8%BA%E5%88%86%E7%A6%BB"><span class="toc-text">1. 基本原则：结构、样式、行为分离</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%96%87%E4%BB%B6-%E8%B5%84%E6%BA%90%E5%91%BD%E5%90%8D"><span class="toc-text">2.文件&#x2F;资源命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%9C%81%E7%95%A5%E5%A4%96%E9%93%BE%E8%B5%84%E6%BA%90-URL-%E5%8D%8F%E8%AE%AE%E9%83%A8%E5%88%86"><span class="toc-text">3.省略外链资源 URL 协议部分</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%86%99%E6%B3%A8%E9%87%8A"><span class="toc-text">4.写注释</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E8%A7%84%E8%8C%83"><span class="toc-text">HTML规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-text">标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Class-%E4%B8%8E-ID"><span class="toc-text">Class 与 ID</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E9%A1%BA%E5%BA%8F"><span class="toc-text">属性顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97"><span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%AD%E4%B9%89%E5%B5%8C%E5%A5%97%E7%BA%A6%E6%9D%9F"><span class="toc-text">语义嵌套约束</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%A5%E6%A0%BC%E5%B5%8C%E5%A5%97%E7%BA%A6%E6%9D%9F"><span class="toc-text">严格嵌套约束</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%9F%BA%E6%9C%AC%E6%96%87%E6%9C%AC"><span class="toc-text">2.基本文本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-SEO-%E4%BC%98%E5%8C%96"><span class="toc-text">3.SEO 优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8F%AF%E9%80%89%E6%A0%87%E7%AD%BE"><span class="toc-text">4.可选标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%A0%B7%E5%BC%8F%E8%A1%A8%E3%80%81%E8%84%9A%E6%9C%AC%E5%8A%A0%E8%BD%BD"><span class="toc-text">5.样式表、脚本加载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E8%A7%84%E8%8C%83"><span class="toc-text">CSS规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A-1"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E9%A1%BA%E5%BA%8F"><span class="toc-text">声明顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%A1%BA%E5%BA%8F"><span class="toc-text">链接的样式顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E5%90%8D"><span class="toc-text">命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%8D%E6%B1%87%E8%A7%84%E8%8C%83"><span class="toc-text">词汇规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%A9%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-text">缩写规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%BC%80%E8%A7%84%E8%8C%83"><span class="toc-text">前缀规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E6%9D%83%E9%87%8D%E7%AD%89%E7%BA%A7"><span class="toc-text">选择器权重等级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%80%E5%86%99-%E7%9C%81%E7%95%A5-%E7%BC%A9%E5%86%99"><span class="toc-text">简写&#x2F;省略&#x2F;缩写</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Less-%E5%92%8C-Sass"><span class="toc-text">2.Less 和 Sass</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">操作符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97-1"><span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87"><span class="toc-text">代码组织</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%B7%E5%85%A5%EF%BC%88Mixin%EF%BC%89"><span class="toc-text">混入（Mixin）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-text">模块化</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-hack%E8%A7%84%E8%8C%83"><span class="toc-text">3.hack规范</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#IE%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="toc-text">IE条件注释语法：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8A%A8%E7%94%BB%E4%B8%8E%E8%BD%AC%E6%8D%A2"><span class="toc-text">4.动画与转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-text">5.性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%85%8E%E9%87%8D%E9%80%89%E6%8B%A9%E9%AB%98%E6%B6%88%E8%80%97%E7%9A%84%E6%A0%B7%E5%BC%8F"><span class="toc-text">慎重选择高消耗的样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8-Display-%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-text">正确使用 Display 的属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%90%E5%8D%87-CSS-%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%A7%E8%83%BD"><span class="toc-text">提升 CSS 选择器性能</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E9%80%9A%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用通用选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E6%88%96-class-%E9%80%89%E6%8B%A9%E5%99%A8%E9%99%90%E5%88%B6-id-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用标签或 class 选择器限制 id 选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E9%99%90%E5%88%B6-class-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用标签限制 class 选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E5%A4%9A%E5%B1%82%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82"><span class="toc-text">避免使用多层标签选择器。</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E5%AD%90%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用子选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E7%BB%A7%E6%89%BF"><span class="toc-text">使用继承</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E8%A7%84%E8%8C%83"><span class="toc-text">JavaScript规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A-2"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E5%90%8D-1"><span class="toc-text">命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%85%83%E5%92%8C%E4%B8%89%E5%85%83%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">二元和三元操作符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6-%E4%B8%89%E5%85%83-%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">条件(三元)操作符 ( ? : )</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B7%E5%A4%87%E5%BC%BA%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%AE%BE%E8%AE%A1"><span class="toc-text">具备强类型的设计</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%87%BD%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="toc-text">2.函数设计</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E9%95%BF%E5%BA%A6"><span class="toc-text">函数长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="toc-text">参数设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-text">箭头函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%92%8C%E5%8F%98%E9%87%8F"><span class="toc-text">函数和变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9D%97%E5%86%85%E5%87%BD%E6%95%B0%E5%BF%85%E9%A1%BB%E7%94%A8%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E"><span class="toc-text">块内函数必须用局部变量声明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%A9%BA%E5%87%BD%E6%95%B0"><span class="toc-text">空函数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-text">3.性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84-DOM-%E6%93%8D%E4%BD%9C"><span class="toc-text">避免不必要的 DOM 操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98%E6%95%B0%E7%BB%84%E9%95%BF%E5%BA%A6"><span class="toc-text">缓存数组长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%98%E5%8C%96-JavaScript-%E7%9A%84%E7%89%B9%E5%BE%81"><span class="toc-text">优化 JavaScript 的特征</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%98%E5%8C%96-JavaScript-%E6%89%A7%E8%A1%8C"><span class="toc-text">优化 JavaScript 执行</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%AC%AC%E4%B8%89%E6%96%B9%E5%86%85%E5%AE%B9"><span class="toc-text">异步加载第三方内容</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E8%B0%83%E8%AF%95"><span class="toc-text">5.调试</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue"><span class="toc-text">vue</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react"><span class="toc-text">react</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#angular"><span class="toc-text">angular</span></a></li></ol>
      </div>
    </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header">
    <i 
      class="iconfont icon-fenlei" 
      style="padding-right: 2px;">
    </i>分类
  </div>
  <div class="categories-list">
    
      <a href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">
        <div class="categories-list-item">
          技术文章
          <span class="categories-list-item-badge">218</span>
        </div>
      </a>
    
      <a href="/categories/%E5%85%B6%E4%BB%96/">
        <div class="categories-list-item">
          其他
          <span class="categories-list-item-badge">16</span>
        </div>
      </a>
    
      <a href="/categories/%E6%97%85%E6%B8%B8/">
        <div class="categories-list-item">
          旅游
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
      <a href="/categories/%E7%AE%97%E6%B3%95/">
        <div class="categories-list-item">
          算法
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E8%80%83%E8%AF%95/">
        <div class="categories-list-item">
          考试
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E9%98%85%E8%AF%BB/">
        <div class="categories-list-item">
          阅读
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header">
    <i 
      class="iconfont icon-biaoqian" 
      style="padding-right: 2px;">
    </i>热门标签
  </div>
  <div class="tags-list">
    
      <a 
        href="/tags/js/" 
        title="js">
        <div class="tags-list-item">js</div>
      </a>
    
      <a 
        href="/tags/vue/" 
        title="vue">
        <div class="tags-list-item">vue</div>
      </a>
    
      <a 
        href="/tags/%E9%9D%A2%E8%AF%95/" 
        title="面试">
        <div class="tags-list-item">面试</div>
      </a>
    
      <a 
        href="/tags/css/" 
        title="css">
        <div class="tags-list-item">css</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C/" 
        title="网络">
        <div class="tags-list-item">网络</div>
      </a>
    
      <a 
        href="/tags/%E5%85%B6%E4%BB%96/" 
        title="其他">
        <div class="tags-list-item">其他</div>
      </a>
    
      <a 
        href="/tags/%E7%AE%97%E6%B3%95/" 
        title="算法">
        <div class="tags-list-item">算法</div>
      </a>
    
      <a 
        href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" 
        title="浏览器">
        <div class="tags-list-item">浏览器</div>
      </a>
    
      <a 
        href="/tags/html/" 
        title="html">
        <div class="tags-list-item">html</div>
      </a>
    
      <a 
        href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" 
        title="操作系统">
        <div class="tags-list-item">操作系统</div>
      </a>
    
      <a 
        href="/tags/%E8%80%83%E8%AF%95/" 
        title="考试">
        <div class="tags-list-item">考试</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" 
        title="软实力">
        <div class="tags-list-item">软实力</div>
      </a>
    
      <a 
        href="/tags/DOM/" 
        title="DOM">
        <div class="tags-list-item">DOM</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AE%E5%AD%90/" 
        title="轮子">
        <div class="tags-list-item">轮子</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C%E5%8E%9F%E7%90%86/" 
        title="网络原理">
        <div class="tags-list-item">网络原理</div>
      </a>
    
      <a 
        href="/tags/debug/" 
        title="debug">
        <div class="tags-list-item">debug</div>
      </a>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
            <aside class="right-column">
              <div class="sticky-widescreen">
  
  
    <article class="card card-content toc-card">
      <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9B%A0"><span class="toc-text">原因</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-text">通用书写规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E5%8E%9F%E5%88%99%EF%BC%9A%E7%BB%93%E6%9E%84%E3%80%81%E6%A0%B7%E5%BC%8F%E3%80%81%E8%A1%8C%E4%B8%BA%E5%88%86%E7%A6%BB"><span class="toc-text">1. 基本原则：结构、样式、行为分离</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%96%87%E4%BB%B6-%E8%B5%84%E6%BA%90%E5%91%BD%E5%90%8D"><span class="toc-text">2.文件&#x2F;资源命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%9C%81%E7%95%A5%E5%A4%96%E9%93%BE%E8%B5%84%E6%BA%90-URL-%E5%8D%8F%E8%AE%AE%E9%83%A8%E5%88%86"><span class="toc-text">3.省略外链资源 URL 协议部分</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%86%99%E6%B3%A8%E9%87%8A"><span class="toc-text">4.写注释</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E8%A7%84%E8%8C%83"><span class="toc-text">HTML规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-text">标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Class-%E4%B8%8E-ID"><span class="toc-text">Class 与 ID</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E9%A1%BA%E5%BA%8F"><span class="toc-text">属性顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97"><span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%AD%E4%B9%89%E5%B5%8C%E5%A5%97%E7%BA%A6%E6%9D%9F"><span class="toc-text">语义嵌套约束</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%A5%E6%A0%BC%E5%B5%8C%E5%A5%97%E7%BA%A6%E6%9D%9F"><span class="toc-text">严格嵌套约束</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%9F%BA%E6%9C%AC%E6%96%87%E6%9C%AC"><span class="toc-text">2.基本文本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-SEO-%E4%BC%98%E5%8C%96"><span class="toc-text">3.SEO 优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8F%AF%E9%80%89%E6%A0%87%E7%AD%BE"><span class="toc-text">4.可选标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%A0%B7%E5%BC%8F%E8%A1%A8%E3%80%81%E8%84%9A%E6%9C%AC%E5%8A%A0%E8%BD%BD"><span class="toc-text">5.样式表、脚本加载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E8%A7%84%E8%8C%83"><span class="toc-text">CSS规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A-1"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E9%A1%BA%E5%BA%8F"><span class="toc-text">声明顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%A1%BA%E5%BA%8F"><span class="toc-text">链接的样式顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E5%90%8D"><span class="toc-text">命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%8D%E6%B1%87%E8%A7%84%E8%8C%83"><span class="toc-text">词汇规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%A9%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-text">缩写规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%BC%80%E8%A7%84%E8%8C%83"><span class="toc-text">前缀规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E6%9D%83%E9%87%8D%E7%AD%89%E7%BA%A7"><span class="toc-text">选择器权重等级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%80%E5%86%99-%E7%9C%81%E7%95%A5-%E7%BC%A9%E5%86%99"><span class="toc-text">简写&#x2F;省略&#x2F;缩写</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Less-%E5%92%8C-Sass"><span class="toc-text">2.Less 和 Sass</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">操作符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97-1"><span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87"><span class="toc-text">代码组织</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%B7%E5%85%A5%EF%BC%88Mixin%EF%BC%89"><span class="toc-text">混入（Mixin）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-text">模块化</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-hack%E8%A7%84%E8%8C%83"><span class="toc-text">3.hack规范</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#IE%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="toc-text">IE条件注释语法：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8A%A8%E7%94%BB%E4%B8%8E%E8%BD%AC%E6%8D%A2"><span class="toc-text">4.动画与转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-text">5.性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%85%8E%E9%87%8D%E9%80%89%E6%8B%A9%E9%AB%98%E6%B6%88%E8%80%97%E7%9A%84%E6%A0%B7%E5%BC%8F"><span class="toc-text">慎重选择高消耗的样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8-Display-%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-text">正确使用 Display 的属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%90%E5%8D%87-CSS-%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%A7%E8%83%BD"><span class="toc-text">提升 CSS 选择器性能</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E9%80%9A%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用通用选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E6%88%96-class-%E9%80%89%E6%8B%A9%E5%99%A8%E9%99%90%E5%88%B6-id-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用标签或 class 选择器限制 id 选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E9%99%90%E5%88%B6-class-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用标签限制 class 选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E5%A4%9A%E5%B1%82%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82"><span class="toc-text">避免使用多层标签选择器。</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E5%AD%90%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">避免使用子选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E7%BB%A7%E6%89%BF"><span class="toc-text">使用继承</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E8%A7%84%E8%8C%83"><span class="toc-text">JavaScript规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%9A%E7%94%A8%E7%BA%A6%E5%AE%9A-2"><span class="toc-text">1.通用约定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E5%90%8D-1"><span class="toc-text">命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%85%83%E5%92%8C%E4%B8%89%E5%85%83%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">二元和三元操作符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6-%E4%B8%89%E5%85%83-%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">条件(三元)操作符 ( ? : )</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B7%E5%A4%87%E5%BC%BA%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%AE%BE%E8%AE%A1"><span class="toc-text">具备强类型的设计</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%87%BD%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="toc-text">2.函数设计</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E9%95%BF%E5%BA%A6"><span class="toc-text">函数长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="toc-text">参数设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-text">箭头函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%92%8C%E5%8F%98%E9%87%8F"><span class="toc-text">函数和变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9D%97%E5%86%85%E5%87%BD%E6%95%B0%E5%BF%85%E9%A1%BB%E7%94%A8%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E"><span class="toc-text">块内函数必须用局部变量声明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%A9%BA%E5%87%BD%E6%95%B0"><span class="toc-text">空函数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-text">3.性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%81%BF%E5%85%8D%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84-DOM-%E6%93%8D%E4%BD%9C"><span class="toc-text">避免不必要的 DOM 操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98%E6%95%B0%E7%BB%84%E9%95%BF%E5%BA%A6"><span class="toc-text">缓存数组长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%98%E5%8C%96-JavaScript-%E7%9A%84%E7%89%B9%E5%BE%81"><span class="toc-text">优化 JavaScript 的特征</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%98%E5%8C%96-JavaScript-%E6%89%A7%E8%A1%8C"><span class="toc-text">优化 JavaScript 执行</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%AC%AC%E4%B8%89%E6%96%B9%E5%86%85%E5%AE%B9"><span class="toc-text">异步加载第三方内容</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E8%B0%83%E8%AF%95"><span class="toc-text">5.调试</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue"><span class="toc-text">vue</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react"><span class="toc-text">react</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#angular"><span class="toc-text">angular</span></a></li></ol>
    </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    <i 
      class="iconfont icon-wenzhang_huaban" 
      style="padding-right: 2px;">
    </i>最近文章
  </div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-05-01</div>
        <a href="/2022/05/01/typescriptHome/"><div class="recent-posts-item-content">typescript</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptTheVariousWaysAndAdvantagesAndDisadvantagesOfDeepInheritance/"><div class="recent-posts-item-content">JavaScript深入之继承的多种方式和优缺点</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptGoFromPrototypeToPrototypeChain/"><div class="recent-posts-item-content">JavaScript深入之从原型到原型链</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptMemoryLeakTutorial/"><div class="recent-posts-item-content">JavaScript 内存泄漏教程</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    关注嘉然！顿顿解馋！
  </div>
  <div class="recent-posts-list">
    
      <img 
        src="https://api2.mubu.com/v3/document_image/2697c6ae-10ee-41a3-9099-304bdb252d31-3807603.jpg" 
        class="myadd-img" 
        alt="author avatar">
    
  </div>
</div>
  </article>
</div>
            </aside>
          </div>
        </div>
      </div>
    </div>
     
    <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>
          Copyright ©
          
            2020 -
          
          2022
        </span>
        &nbsp;
        <a 
          href="/" 
          class="footer-link">
          霜序廿的个人网站
        </a>
      </div>
    </div>

    
      <div class="footer-dsc">
        
          Powered by
          <a 
            href="https://hexo.io/" 
            class="footer-link" 
            target="_blank" 
            rel="nofollow noopener noreferrer">
            &nbsp;Hexo
          </a>
        
        
          <span>&nbsp;|&nbsp;</span>
        
        
          Theme -
          <a 
            href="https://github.com/theme-kaze" 
            class="footer-link" 
            target="_blank"
            rel="nofollow noopener noreferrer">
            &nbsp;Kaze
          </a>
        
      </div>
    
    
    
    
</footer> 
    
  <a 
    role="button" 
    id="scrollbutton" 
    class="basebutton" 
    aria-label="回到顶部">
    <i class="iconfont icon-arrowleft button-icon"></i>
  </a>

<a 
  role="button" 
  id="menubutton" 
  class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a 
  role="button" 
  id="popbutton" 
  class="basebutton" 
  aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a 
  role="button" 
  id="darkbutton" 
  class="basebutton darkwidget" 
  aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a 
  role="button" 
  id="searchbutton" 
  class="basebutton searchwidget" 
  aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a> 
     
     
     
      <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img')
    var i
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a')
      wrapper.setAttribute('href', img[i].getAttribute('data-src'))
      wrapper.setAttribute('aria-label', 'illustration')
      wrapper.style.cssText =
        'width: 100%; display: flex; justify-content: center;'
      if (img[i].alt) wrapper.dataset.caption = img[i].alt
      wrapper.dataset.nolink = true
      img[i].before(wrapper)
      wrapper.append(img[i])
      var divWrap = document.createElement('div')
      divWrap.classList.add('gallery')
      wrapper.before(divWrap)
      divWrap.append(wrapper)
    }
    baguetteBox.run('.gallery')
  }
</script>
<script>
  loadScript(
    "/js/lib/lightbox/baguetteBox.min.js",
    addImgLayout
  )
</script>
 
     
     
    <script src="/js/main.js"></script> 
     
    
      <script>
        var addLazyload = function () {
          var observer = lozad('.lozad', {
            load: function (el) {
              el.srcset = el.getAttribute('data-src')
            },
            loaded: function (el) {
              el.classList.add('loaded')
            },
          })
          observer.observe()
        }
      </script>
      <script>
        loadScript('/js/lib/lozad.min.js', addLazyload)
      </script>
     
    
    
  </body>
</html>
